<script setup>
import { computed, ref, watch } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getActivityByHome } from "@/api/activity";
import { getBanner } from "@/api/index";
import { handleToPage } from "@/utils";

const { items: list, hasMore, resetAndLoad } = useInfiniteScroll(getActivityByHome);

/** 是否无数据 */
const isEmpty = computed(() => {
  if (!hasMore.value && list.value.length === 0) return true;
  return false;
});

/** 查询参数  */
const queryParams = ref({
  is_index: '1'
});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
}, { deep: true });

function handleSwitchTab(url){
  uni.switchTab({url});
}

const bannerList = ref([]);
const shareInfo = ref({});

// 页面加载
onLoad(() => {
  getBanner().then(({ list, shareTitle })=>{
    bannerList.value = list;
    shareInfo.value = {
      title: shareTitle,
      // imageUrl: 'https://static.minglvtang.com/images/share.png',
    }
  });
  resetAndLoad(queryParams.value);
});

onShareAppMessage(()=>{
  return {
    ...shareInfo.value
  }
})

function handleToPages(data) {
  if(data.title == '2025法律行业大会'){
    handleToPage(`https://qy.yishe.co/_74/?t=152&inv=26787#/pages/index/page?p=3480`, true)
  } else { 
    handleToPage(`/pages/activity/detail?id=${data.id}`)
  }
}

function handleClickSwiper(data) {
  if(data.type == 'web') {
    handleToPage(data.path, true)
  }
}
</script>

<template>
  <view class="relative overflow-hidden">
    <view class="bg-#E7F0FF sticky top-0">
      <uv-status-bar></uv-status-bar>
    </view>
 
    <swiper class="h-50" indicator-dots autoplay loop>
      <swiper-item v-for="(item, index) in bannerList" :key="index" >
        <image class="w-full h-50 align-middle" :src="`https://api.minglvtang.com${item.img}`" mode="aspectFill" @click="handleClickSwiper(item)" />
      </swiper-item>
    </swiper>

    <view class="px-4 mt-1 grid gap-5">
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/guide.png" mode="widthFix" @click="handleToPage('/pages/recommend/form-year')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/recommend.png" mode="widthFix" @click="handleToPage('/pages/recommend/selected')" />
    </view>

    <view class="grid gap-3 grid-cols-2 mx-4 mt-5">
      <image class="w-full align-middle row-span-2" src="https://static.minglvtang.com/images/ranking.png" mode="widthFix" alt="榜单排名" @click="handleSwitchTab('/pages/tabbar/top')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/recent_activities.png" mode="widthFix" alt="近期活动" @click="handleToPage('/pages/activity/list')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/publish_needs.png" mode="widthFix" alt="发布需求" @click="handleToPage('/pages/need/post')" />
    </view> 

    <view class="flex items-center justify-between mx-4 mt-5 mb-2">
      <view class="text-(lg black/80)">近期活动</view>
      <view class="flex items-center text-black/60" @click="handleToPage('/pages/activity/list')"> 
        <view class="text-sm">全部活动</view>
        <view class="i-ri-arrow-right-s-line"></view>
      </view>
    </view>

    <view class="bg-white rounded-lg p-3 mb-5 mx-4 grid gap-2" v-for="item in list" :key="item.id" @click="handleToPages(item)">
      <image class="w-full h-45 align-middle rounded-md" :src="`https://api.minglvtang.com${item.imgs}`" :fade-in="true" :lazy-load="true" mode="scaleToFill" />
      <view class="text-(sm black/80) font-500 truncate">{{ item.title }}</view>
      <view class="text-(sm black/60) line-clamp-2">{{ item.desc }}</view>
      <view class="flex items-center justify-between pt-2 border-t-(~ solid black/8)">
        <view class="text-(sm black/60)">{{item.start_time}} · {{item.city}} · {{ item.price == 0 ? '免费' : item.price }}</view>
        <view class="text-(sm/6 white) px-3 rounded-full bg-gradient-to-r from-#FF920D to-#FFCF0D">报名参加</view>
      </view>
    </view>
    
    <!-- empty -->
    <view v-if="isEmpty" class="h-50 flex flex-col items-center justify-center">
      <view class="text-center text-gray">
        <view class="i-quill-signature mx-auto h-25 w-25" />
        <view class="text-sm"> 暂无数据 </view>
      </view>
    </view>

    <view v-if="list.length > 0" class="bg-white rounded-lg flex items-center justify-center h-10 mx-4 my-2 text-#253851" @click="handleToPage('/pages/activity/list')">
      <view class="text-sm">查看全部活动</view>
      <view class="i-ri-arrow-right-s-line"></view>
    </view>
  </view>
</template>
